<template>
  <div class="app-container">
    <div class="menu-container">

      <el-form :inline="true" style="float: left;">
        <el-button size="mini" type="primary" @click="showAddBannerDialog()">添加分销商</el-button>
      </el-form>

      <el-form :inline="true" :model="listQuery" style="float: right;">
        <el-form-item :label-width="formLabelWidth" label="审核状态">
          <el-select v-model="listQuery.state" :clearable="true" placeholder="请选择" size="mini">
            <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="listQuery.mobile" size="mini" placeholder="分销商电话"/>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" icon="el-icon-search" type="warning" circle @click="getList()"/>
        </el-form-item>
      </el-form>
      <div style="clear:both"/>
    </div>

    <el-table v-loading="listLoading" :data="page.records" border fit highlight-current-row style="width: 100%;margin-top:5px;" height="500">

      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="微信昵称">
        <template slot-scope="scope">
          <span>{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>

      <el-table-column min-width="100px" align="center" label="总佣金">
        <template slot-scope="scope">
          <span>{{ scope.row.total_account }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" align="center" label="待结算佣金">
        <template slot-scope="scope">
          <span>{{ scope.row.settle_account }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" align="center" label="已结算佣金">
        <template slot-scope="scope">
          <span>{{ scope.row.entered_account }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" align="center" label="未入账佣金">
        <template slot-scope="scope">
          <span>{{ scope.row.outstanding_account }}</span>
        </template>
      </el-table-column>

      <el-table-column width="80px" align="center" label="分成比例">
        <template slot-scope="scope">
          <span>{{ scope.row.commission_rate_desc }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="联系方式">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>

      <el-table-column width="160px" align="center" label="身份证号">
        <template slot-scope="scope">
          <span>{{ scope.row.id_card }}</span>
        </template>
      </el-table-column>

      <el-table-column width="160px" align="center" label="收款账号">
        <template slot-scope="scope">
          <span>{{ scope.row.shroff_account_num }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" align="center" label="收款姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.receiptor }}</span>
        </template>
      </el-table-column>

      <el-table-column width="160px" align="center" label="开户银行">
        <template slot-scope="scope">
          <span>{{ scope.row.bank_of_deposit }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="关联客户数量">
        <template slot-scope="scope">
          <span>{{ scope.row.subscriber_count }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="关联客户下单量">
        <template slot-scope="scope">
          <span>{{ scope.row.subscriber_order_count }}</span>
        </template>
      </el-table-column>

      <el-table-column width="140px" align="center" label="关联客户下单金额">
        <template slot-scope="scope">
          <span>{{ scope.row.subscriber_order_amount }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" align="center" label="账号状态">
        <template slot-scope="scope">
          <span>{{ scope.row.disabled_desc }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" align="center" label="审核状态">
        <template slot-scope="scope">
          <span>{{ scope.row.state_desc }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="450px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.disabled===1" type="success" size="small" icon="el-icon-edit" @click="accountManagement(scope.row.id, 0)">启用</el-button>
          <el-button v-else type="danger" size="small" icon="el-icon-edit" @click="accountManagement(scope.row.id, 1)">禁用</el-button>
          <el-button type="primary" size="small" icon="el-icon-edit" @click="editDistributor(scope.row)">编辑</el-button>
          <el-button v-show="scope.row.state === 0" type="primary" size="small" icon="el-icon-edit" plain @click="verifyApplications(scope.row.id, 1)">审核通过</el-button>
          <el-button v-show="scope.row.state === 0" type="warning" size="small" icon="el-icon-edit" plain @click="verifyApplications(scope.row.id, 2)">审核拒绝</el-button>
          <!-- <el-button type="danger" size="small" icon="el-icon-delete" @click="delDistributor(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>

    </el-table>
    <div class="paginator">
      <el-pagination
        :current-page="listQuery.pageNum"
        :background="true"
        :page-sizes="[50, 100]"
        :page-size="listQuery.pageSize"
        :total="page.recordsTotal"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="currentPageSizeChange"
        @current-change="currentPageNumChange"/>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">

      <el-form :model="form">
        <el-form-item v-if="isUpdateDistributor === false" :label-width="formLabelWidth" label="用户ID">
          <el-input v-model="form.user_id" auto-complete="off" size="mini"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="联系电话">
          <el-input v-model="form.mobile" auto-complete="off" size="mini"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="身份证">
          <el-input v-model="form.id_card" auto-complete="off" size="mini"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="收款姓名">
          <el-input v-model="form.receiptor" auto-complete="off" size="mini"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="银行账号">
          <el-input v-model="form.shroff_account_num" auto-complete="off" size="mini"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="开户支行">
          <el-input v-model="form.bank_of_deposit" auto-complete="off" size="mini"/>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="佣金分成比例">
          <el-input-number v-model="form.commission_rate" :min="1" :max="70" size="mini" label="佣金分成比例"/>
          <span>%</span>
        </el-form-item>
        <el-form-item v-if="isUpdateDistributor" :label-width="formLabelWidth" label="审核状态">
          <el-select v-model="form.state" placeholder="请选择" size="mini">
            <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item v-if="isUpdateDistributor" :label-width="formLabelWidth" label="账户状态">
          <el-select v-model="form.disabled" placeholder="请选择" size="mini">
            <el-option
              v-for="item in disabledOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="createDistributorHandle()">确 定</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import { fetchList, createDistributor, updateDistributor, deleteDistributor } from '@/api/distributor'
import Upload from '@/components/Upload/singleImage3'

const defaultForm = {
  id: undefined,
  user_id: '',
  mobile: '',
  id_card: '',
  shroff_account_num: '',
  receiptor: '',
  bank_of_deposit: '',
  commission_rate: 10,
  state: 0,
  disabled: 0
}
export default {
  name: 'BannerList',
  components: { Upload },
  data() {
    return {
      list: null,
      listLoading: true,
      dialogTitle: '新增Banner',
      formLabelWidth: '100px',
      stateOptions: [
        { value: 0, label: '未审核' },
        { value: 1, label: '审核通过' },
        { value: 2, label: '审核拒绝' }
      ],
      disabledOptions: [
        { value: 0, label: '启用' },
        { value: 1, label: '禁用' }
      ],
      form: Object.assign({}, defaultForm),
      dialogFormVisible: false,
      isUpdateDistributor: false,
      listQuery: {
        pageSize: 100,
        pageNum: 1,
        mobile: '',
        state: ''
      },
      page: {
        pageNum: 1, pageSize: 100, pageTotal: 0, recordsTotal: 0, records: []
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    clearForm() {
      this.form = Object.assign({}, defaultForm)
    },
    editDistributor(distributor) {
      this.form.id = distributor.id
      this.form.user_id = distributor.user_id
      this.form.mobile = distributor.mobile
      this.form.id_card = distributor.id_card
      this.form.shroff_account_num = distributor.shroff_account_num
      this.form.receiptor = distributor.receiptor
      this.form.bank_of_deposit = distributor.bank_of_deposit
      this.form.commission_rate = distributor.commission_rate
      this.form.state = distributor.state
      this.form.disabled = distributor.disabled
      this.dialogTitle = '修改分销商信息'
      this.isUpdateDistributor = true
      this.dialogFormVisible = true
    },
    delDistributor(distributor) {
      this.myConfirm('是否确定删除该分销商！', this._delDistributor, distributor, '取消操作')
    },
    _delDistributor(row) {
      deleteDistributor(row.id).then(response => {
        const r = response.data
        if (r.code === 0) {
          this.$message({ message: '删除成功', type: 'success' })
          this.getList()
        } else {
          this.$message({ message: r.msg, type: 'error' })
        }
      })
    },
    verifyApplications(id, state) {
      var params = { id: id, state: state }
      this.baseUpdateDistributor(params)
    },
    accountManagement(id, disabled) {
      var params = { id: id, disabled: disabled }
      var optDesc = disabled === 1 ? '禁用' : '启用'
      this.myConfirm('是否确定' + optDesc + '该分销商！', this.baseUpdateDistributor, params, '取消操作')
    },
    baseUpdateDistributor(param) {
      updateDistributor(param).then(response => {
        const r = response.data
        if (r.code === 0) {
          this.$message({ message: '操作成功', type: 'success' })
          this.getList()
        } else {
          this.$message({ message: r.msg, type: 'error' })
        }
      })
    },
    showAddBannerDialog() {
      this.clearForm()
      this.dialogTitle = '新增分销商'
      this.isUpdateDistributor = false
      this.dialogFormVisible = true
    },
    createDistributorHandle() {
      var func = createDistributor
      if (this.form.id !== undefined && this.form.id !== '') {
        func = updateDistributor
      }
      func(this.form).then(response => {
        const r = response.data
        if (r.code === 0) {
          this.$message({ message: '操作成功', type: 'success' })
          this.dialogFormVisible = false
          this.clearForm()
          this.getList()
        } else {
          this.$message({ message: r.msg, type: 'error' })
        }
      })
    },
    currentPageNumChange(currentPageNum) {
      this.listQuery.pageNum = currentPageNum
      this.getList()
    },
    currentPageSizeChange(currentPageSize) {
      this.listQuery.pageSize = currentPageSize
      this.getList()
    },
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.page = response.data.data
        this.listLoading = false
      })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.el-form-item {
    margin-bottom: 0px;
}
</style>
